<template>
  <div class="course">
    <van-nav-bar title="课程详情" placeholder fixed left-arrow @click-left="back">
      <template #right>
        <img @click="show = true" style="width: 24px; height: 24px" src="@/assets/images/fx2.png" />
      </template>
    </van-nav-bar>
    <div class="course__content">
      <img class="course__banner" src="@/assets/images/login.png" alt="" />
      <div class="course__cont">
        <div class="course__title">七天学会做出职场大神级PPT</div>
        <div class="course__rate">
          <div class="course__score">
            <van-rate color="#FAC923" size="20px" v-model="score" />
            <span>{{ score.toFixed(1) }}</span>
          </div>
          <span class="course__count">共16节</span>
        </div>
        <div class="course__jb">
          <label>首次学完</label>
          <div class="course__money">
            <span>50</span>金币 <span>200</span>经验
          </div>
        </div>
      </div>

      <div class="course__dire">
        <div class="course__dtitle">授课老师</div>
        <div class="course__navs">
          <div class="course__item">
            <div class="course__item-left">
              <img src="@/assets/images/login.png" />
              <div class="course__item-names">
                <div>上官高高</div>
                <span>市场专员</span>
              </div>
            </div>
            <div class="course__item-xs">
              <van-icon name="arrow" />
            </div>
          </div>
          <!-- <div class="course__item course__item3" v-for="i in 3">
            <div class="course__item-left">
              <img src="@/assets/images/login.png" />
              <div class="course__item-names">
                <div>上官高高</div>
                <span>市场专员</span>
              </div>
            </div>
            <div class="course__item-xs">
              <van-icon name="arrow" />
            </div>
          </div> -->
        </div>

        <div class="course__list">
          <div class="course__title2">
            <label>课程目录</label>
            <span>2022年0606日-06月09日·共16课节</span>
          </div>
          <!-- 含有子目录 -->
          <van-collapse v-model="active">
            <van-collapse-item title="第一章 课程名称" name="1">
              <div class="sign-item">
                <div class="sign-item__left">
                  <div class="sign-item__title">二、课程名称</div>
                  <div class="sign-item__time">
                    <van-icon name="clock-o" /><span>01:33</span>
                  </div>
                </div>
                <div class="sign-item__play">
                  <img
                    src="@/assets/images/play.png"
                    style="width: 24px; height: 24px"
                  />
                </div>
              </div>
            </van-collapse-item>
            <van-collapse-item title="第一章 课程名称" name="2">
              <div class="sign-item">
                <div class="sign-item__left">
                  <div class="sign-item__title">二、课程名称</div>
                  <div class="sign-item__time">
                    <van-icon name="clock-o" /><span>01:33</span>
                  </div>
                </div>
                <div class="sign-item__play">
                  <img
                    src="@/assets/images/play.png"
                    style="width: 24px; height: 24px"
                  />
                </div>
              </div>
            </van-collapse-item>
          </van-collapse>
          <!-- 不含子目录 -->
          <div class="no-dir">
            <div class="sign-item sign-t" v-for="i in 2" :key="i">
              <div class="sign-item__left">
                <div class="sign-item__title">二、课程名称</div>
                <div class="sign-item__time">
                  <van-icon name="clock-o" /><span>01:33</span>
                </div>
              </div>
              <div class="sign-item__play">
                <img
                  src="@/assets/images/play.png"
                  style="width: 24px; height: 24px"
                />
              </div>
            </div>
          </div>

          <div class="more-tips">
            <div v-if="!open">
              查看全部16节课 <van-icon color="#676b6b" name="arrow" />
            </div>
            <div v-else>收起目录 <van-icon color="#676b6b" name="arrow" /></div>
          </div>
        </div>
      </div>

      <div class="comm">
        <div class="comm__title">
          <div>评价（24）</div>
          <span>更多</span>
        </div>
        <div class="comm__cont">
          <Comment>Comment</Comment>
        </div>
      </div>

      <div class="introduce">
        <div class="introduce__title">课程详情</div>
        <div class="introduce__desc">
          PPT(全名: PowerPoint )是美国微软公司出品的办公软件系列重要组件
          之一(另外还有 Excel 、 Word 等);最常用的就是用来制作幻灯片。
        </div>
        <div class="introduce__photo">
          <img src="@/assets/images/login.png" />
        </div>
      </div>
    </div>

    <van-popup v-model:show="show" position="bottom">
      <div class="pop">
        <div class="pop__title">
          <div>七天学会做出职场大神级PPT</div>
          <span @click="show = false">取消</span>
        </div>
        <div class="pop__center">
          <img src="@/assets/images/login.png" />
          <div class="pop__green">学习标兵：QA测试</div>
          <div class="pop__desc">第一个完成课程学习的人</div>
        </div>
        <div class="pop__comm">
          <div class="pop__dz">
            <img src="@/assets/images/xxts.png" />
            <span>去评价</span>
          </div>
          <div class="pop__btn">分享课程成绩</div>
        </div>
      </div>
    </van-popup>

    <van-back-top bottom="66px" />

    <van-action-bar placeholder>
      <van-action-bar-icon text="收藏">
        <template #icon>
          <img style="width: 22px; height: 22px" src="@/assets/images/sc.png" />
        </template>
      </van-action-bar-icon>
      <van-action-bar-button
        type="danger"
        color="linear-gradient(270deg, #1CA893 0%, #1BCD74 100%)"
        text="开始学习"
      />
    </van-action-bar>
  </div>
</template>
<script name="CourseDetail" setup>
import Comment from "@/components/Comment.vue";
import { ref } from "vue";
const score = ref(4);
const active = ref(["1"]);
const open = ref(false);
const show = ref(false);
const back = () => {
  window.history.back();
};
</script>
<style lang="scss" scoped>
.course {
  &__content {
  }
  &__score {
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #272b2d;
      line-height: 20px;
      padding-left: 6px;
    }
  }
  &__jb {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #272b2d;
    line-height: 17px;
    label {
      margin-right: 6px;
    }
    span {
      color: #ffac24;
    }
  }
  &__count {
    padding-left: 12px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #272b2d;
    line-height: 20px;
  }
  &__rate {
    display: flex;
    align-items: center;
    padding: 8px 0 14px 0;
  }
  &__banner {
    width: 100%;
    height: 208px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &__cont {
    padding: 18px;
    background-color: #fff;
  }
  &__title {
    font-size: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #272b2d;
    line-height: 28px;
  }

  &__dire {
    margin-top: 8px;
    padding: 22px 16px;
    background-color: #fff;
  }
  &__dtitle {
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #171a1d;
    line-height: 25px;
  }
  &__navs {
    display: flex;
    align-items: center;
    padding-top: 8px;
    margin: 0 -6px;
    width: 100%;
    overflow-x: auto;
  }
  &__item {
    padding: 12px 16px;
    background: #f4f8ff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 6px;
    flex: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    &-left {
      display: flex;
      align-items: center;
      img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
    }
    &-names {
      padding-left: 6px;
      div {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #1e1f1f;
        line-height: 20px;
      }
      span {
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #898e8d;
        line-height: 17px;
      }
    }
  }
  &__item3 {
    flex: none !important;
    width: calc(50% - 6px) !important;
  }
  &__title2 {
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    label {
      font-size: 18px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #171a1d;
      line-height: 25px;
    }
    span {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #676b6b;
      line-height: 20px;
    }
  }
  &__list {
    ::v-deep .van-cell {
      background-color: transparent;
      //
      box-sizing: border-box;
      border-bottom: none;
    }
    ::v-deep .van-collapse-item {
      background: #f4f8ff;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    ::v-deep .van-collapse-item__content {
      background: transparent;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  .sign-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    height: 60px;

    &__left {
      flex: 1;
    }
    &__title {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #272b2d;
      line-height: 22px;
    }
    &__time {
      padding-top: 4px;
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #676b6b;
      line-height: 17px;
      span {
        margin-left: 4px;
      }
    }
  }
  .sign-t {
    background: #f4f8ff;
    border-radius: 8px;
    padding: 0 16px;
  }
  .no-dir {
    // background: #f4f8ff;
    // border-radius: 8px;
    // padding: 8px 16px 4px 16px;
  }
  .more-tips {
    padding: 16px 0;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #676b6b;
    line-height: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 14px;
  }

  .comm {
    padding: 22px 16px;
    background-color: #fff;
    margin-top: 8px;
    &__title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        font-size: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #171a1d;
        line-height: 25px;
      }
      span {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #676b6b;
        line-height: 20px;
      }
    }
  }
  .introduce {
    margin-top: 8px;
    padding: 22px 16px;
    background-color: #fff;
    box-sizing: border-box;
    &__title {
      font-size: 18px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #171a1d;
      line-height: 25px;
    }
    &__desc {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #272b2d;
      line-height: 22px;
      padding: 10px 0;
      text-align: justify;
    }
    &__photo {
      img {
        width: 100%;
      }
    }
  }

  .pop {
    padding: 18px 14px;
    background: #ffffff;
    &__title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #272b2d;
        line-height: 22px;
      }
      span {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #00d0ab;
        line-height: 22px;
      }
    }
    &__center {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 0;
      img {
        width: 148px;
        height: 148px;
      }
    }
    &__green {
      padding: 10px 0;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #00d0ab;
      line-height: 22px;
    }
    &__desc {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #676b6b;
      line-height: 20px;
    }
    &__comm {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &__dz {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        margin-bottom: 8px;
      }
      span {
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #3c3c3c;
        line-height: 17px;
      }
    }
    &__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 274px;
      height: 44px;
      background: linear-gradient(270deg, #1ca893 0%, #1bcd74 100%);
      border-radius: 22px;
      font-size: 17px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 24px;
    }
  }
}
</style>